<template>
	<view class="special-content" v-if="pageInfo" :style="'background:' + pageInfo.now_page.bgcolor">
		<block v-for="(item, num) in pageInfo.field_list" :key="num">
			
		<!-- 1.标题组件 -->
		<view v-if="item.field_type == 'title'" :class="'title-box margin-view align-' + item.content.show_method " :style="'background:' + item.content.bgcolor">
			<view class="main" :style="'color:' + item.content.txtcolor">{{item.content.title}}</view>
			<view class="sub" :style="'color:' + item.content.txtcolor2">{{item.content.sub_title}}</view>
		</view>
		
		<!-- 2.富文本组件 -->
		<view v-if="item.field_type == 'rich_text'" class="rich-text padding-view margin-view" :style="'background:' + item.content.bgcolor">
			<rich-text :nodes="item.content.content"></rich-text>
		</view>
		
		<!-- 3.文本导航组件-->
		<block v-if="item.field_type == 'text_nav'">
			<view class="text-nav margin-view" v-for="(textNav,textIndex) of item.content" :key="textIndex" @tap="goUrl(textNav.url)">
				<text class="text">{{item.field_type == 'text_nav' ? textNav.title : textNav.name}}</text>
				<text class="iconfont icon-jiantou"></text>
			</view>
		</block>
		<!--  10. 关联链接 -->
		<block v-if="item.field_type == 'link'">
			<view class="text-nav margin-view" v-for="(textNav,textIndex) of item.content" :key="textIndex" @tap="goUrl(textNav.url)">
				<text class="text">{{item.field_type == 'text_nav' ? textNav.title : textNav.name}}</text>
				<text class="iconfont icon-jiantou"></text>
			</view>
		</block>
		
		<!-- 4.辅助线 -->
		<view v-if="item.field_type == 'line'" class="line"></view>
		
		<!-- 5.辅助空白 -->
		<view v-if="item.field_type == 'white'" class="blank " :style="'height:' + item.content.height +'px'"></view>
		
		<!-- 6.公告 -->
		<view v-if="item.field_type == 'notice'" class="notice" >
			<!-- <view class="marquee-box " :style="'overflow:' + (noticeRect[index] && noticeRect[index].hidden ? 'hidden' : '')">
				<view class="marquee-text" :style="'left:' + (noticeRect[index] ? noticeRect[index].distance : 0) + 'px'">
					<text class="every animate" :data-index="index">{{item.content.content}}</text>
				</view>
			</view> -->
			<view class="marquee-title">公告：</view>
			<view class="marquee-box " style="overflow:hidden">
				<!-- <view class="marquee-text" :style="'left:' + (noticeRect[index] ? noticeRect[index].distance : 0) + 'px'"> -->
					<text :class="'every ' + (noticeRect[num] ? 'animate' : '') " :style="'animation-duration:' + (noticeRect[num] ? noticeRect[num].duration : 0) + 's'" :data-index="num" :data-textLength="item.content.length">{{item.content.content}}</text>
				<!-- </view> -->
			</view>
		</view>
		
		<!-- 7.图片导航 -->
		<!-- 自由布局状况 -->
		<view v-if="item.field_type == 'image_nav'" class="image-nav margin-view">
			<view class="item" v-for="imgNav in item.content" v-if="imgNav.image || imgNav.title" @tap="goUrl(imgNav.url)">
				<view class="img"  :style="'background-image:url(' + imgNav.image+');'"></view>
				<view class="text">{{imgNav.title}}</view>
			</view>
		</view>
		<!-- 悬浮在底部 -->
		<!-- <view v-if="item.field_type == 'image_nav'" class="image-nav margin-view image-nav-fixed">
			<view class="item" v-for="imgNav in item.content" v-if="imgNav.image || imgNav.title" @tap="goUrl(imgNav.url)">
				<view class="img"  :style="'background-image:url(' + imgNav.image+');'"></view>
				<view class="text">{{imgNav.title}}test</view>
			</view>
		</view> -->
		
		<!-- 8.图片广告 大图轮播 大图分开显示 小图分开显示-->
		<block v-if="item.field_type == 'image_ad' && item.content.nav_list">
			<!-- 分开显示 -->
			<block v-if="item.content.image_type == 1">
				<view :class="'image-ad ' + (item.content.image_size == 1 ? 'small' : 'big')">
					<view class="img-box" v-for="img in item.content.nav_list" @tap="goUrl(img.url)" v-if="img.image">
						<image class="img" :src="img.image" mode="aspectFill" ></image>
						<view class="img-desc" :style="item.content.image_size == 1 ? 'left: 10px;': ''" v-if="img.title">{{img.title}}</view>
					</view>
				</view>
			</block>
			<!-- 大图折叠轮播显示 -->
			<view class="image-ad swiper " v-else>
				<swiper class="img-box" :indicator-dots="item.content.nav_list.length > 1? true: false" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="img in item.content.nav_list" :key="img.index" @tap="goUrl(img.url)" v-if="img.image">
						<image class="img" :src="img.image" mode="aspectFill" ></image>
						<view class="img-desc" v-if="img.title">{{img.title}}</view>
					</swiper-item>
				</swiper>
			</view>
			
		</block>
		
		
		<!-- 9.优惠券 -->
		<view v-if="item.field_type == 'coupons'" class="coupon-list padding-view" >
			<view class="coupon-item" v-for="(couponItem, couponIndex) in item.content.coupon_arr" :key="couponItem.id" @click="getCoupon(num, couponIndex)">
				<view class="name-box">
					<image class="img" :src="couponItem.img" mode="aspectFill"></image>
					<text class="name">{{couponItem.name}}</text>
				</view>
				<view class="discount-box">
					<view class="discont">
						<view class="red">
							<block v-if="couponItem.is_discount == 0">{{currency}}<text class="num">{{couponItem.discount}}</text></block>
							<block v-if="couponItem.is_discount == 1"><text class="num">{{couponItem.discount_value}}</text>折</block>
						</view>
						<view class="btn-box">
							<view class="btn receive" v-if="couponItem.can">立即领取</view>
							<view class="btn use" v-if="!couponItem.can && couponItem.is_had">去使用</view>
							<view class="btn end" v-if="!couponItem.can && !couponItem.is_had">已抢完</view>
						</view>
					</view>
					<view class="gray"><lang keywords="满X1可用" :X1="couponItem.order_money" unit="yuanSymbol" :chineseTxt="'满'+ (currency + couponItem.order_money) +'可用'"></lang></view>
				</view>
			</view>
		</view>
		
		<!-- 11.店铺列表  分类导航栏-->
		<block v-if="item.field_type == 'store_cate'">
		<view class="tab-title-wrapper padding-view" v-if="item.content.store_cate_arr.length > 1">
			<view :class="'tab-title ' + (isTitleFixed ? 'fixed' : '')">
				<view class="item" v-for="(typeList, typeIndex) in shopNav" :key="typeList.name" :style="'color:' + (activeIndex == typeIndex ? tabTitleColor : '')" @click="clickTitle(typeIndex)">
					<text class="iconfont icon-dingwei1" v-if="activeIndex == typeIndex"></text>
					<text>{{typeList.title}}</text>
				</view>
			</view>
		</view>
		
		<view class="shop-list padding-view">
			<view class="type-content" v-for="(typeList, index) in item.content.store_cate_arr" :key="index" v-if="typeList.store_list.store_list.length > 0">
				<view class="title"><text class="txt">{{typeList.title}}</text></view>
				<shopItem class="item" v-for="shop in typeList.store_list.store_list" :key="shop.store_id" :shop="shop" :showRange="false"></shopItem>
				<view class="loading-txt">
					<text class="txt" @click="getMoreShop(index)" v-if="typeList.store_list.has_more && !typeList.store_list.is_loading">点击加载更多</text>
					<text class="txt" v-if="typeList.store_list.has_more && typeList.store_list.is_loading">正在加载...</text>
					<text class="txt" v-if="!typeList.store_list.has_more && typeList.store_list.store_list.length > 5">没有更多了哦~</text>
				</view>
			</view>
		</view>
		</block>
		
		</block>
	</view>
</template>

<script>
import shopItem from '../../../appComponent/platcommon/shopItem.vue'
import common from '../../../utils/common.js'
var app = getApp();
var _this
export default {
	components: {shopItem},
	data () {
		return {
			specialId: '',
			pageInfo: '',
			activeIndex: 0,
			tabTitleColor: '#F68029',
			tabTitleTop: 0,
			isTitleFixed: false,
			typeItemTop: [],
			scrollTop: 0,
			currency: '¥',
			noticeOverflow: false,
			marqueeDistance: [], // 公告滚动的距离
			marqueePace: 1, //滚动速度
			noticeRect: {},
			systemInfo: {},
			shopNav: [], // 店铺列表导航栏，最多五个
		}
	},
	onLoad (options) { 
		_this = this
		console.log('99999999999')
		_this.systemInfo = uni.getSystemInfoSync()
		_this.specialId = options.id
		getPageInfo()
		common.getConfig(function(data){
			_this.currency = data.config.Currency_symbol
		})
	},
	onPageScroll (e) {
		let typeItemTop = _this.typeItemTop
		_this.scrollTop = e.scrollTop
		if (typeItemTop.length > 0) {
			if(e.scrollTop >= _this.tabTitleTop && !_this.isTitleFixed) {
				_this.isTitleFixed = true
			} else if (e.scrollTop < _this.tabTitleTop && _this.isTitleFixed) {
				_this.isTitleFixed = false
			}
			if ( _this.activeIndex < typeItemTop.length - 1 && e.scrollTop >= typeItemTop[_this.activeIndex + 1].top - 40) {
				_this.activeIndex = _this.activeIndex + 1
			}
			if ( _this.activeIndex > 0 && e.scrollTop < typeItemTop[_this.activeIndex].top - 40) {
				_this.activeIndex = _this.activeIndex - 1
			}
		}
		
	},
	methods: {
		clickTitle (index) {
			if (index != _this.activeIndex) {
				uni.pageScrollTo({
					scrollTop: _this.typeItemTop[index].top,
					duration: 300
				})
				setTimeout(() => {
					_this.activeIndex = index
				}, 310)
			}
		},
		goUrl (url) {
			if (url) {
				common.parseUrl(url)
			}
		},
		// 立即领取优惠券
		getCoupon (index, couponIndex) {
			console.log('zyl getCoupon',index, couponIndex)
			let coupon = _this.pageInfo.field_list[index].content.coupon_arr[couponIndex]
			if (coupon.can) {
				if (!app.globalData.is_login) {
					_this.user_options = {
						toLogin: true
					}
					return
				}
				console.log(1)
				common.post('Systemcoupon&a=had_pull', {coupon_id: coupon.id}, (data) => {
					console.log('领取优惠券成功', data)
					uni.showToast({
						title: common.changeTxt('已成功领取一张优惠券!'),
						icon: 'none'
					})
					coupon.can = false
					coupon.is_had = true
					_this.pageInfo.field_list[index].content.coupon_arr[couponIndex] = coupon
					_this.$forceUpdate()
				}, _this, (err) => {
					uni.showToast({
						title: common.changeTxt('领取失败!'),
						icon: 'none'
					})
					console.log('领取优惠券错误', err)
				})
			} else if (!coupon.can && coupon.is_had) {
				if (common.checkIsFooterPage("/pages/shop_index/index")) {
					uni.switchTab({
						url: "/pages/shop_index/index"
					});
				} else {
					uni.navigateTo({
						url: '/pages/nofooter/shop/shop_index',
					})
				}
			}
		},
		// 点击加载更多
		getMoreShop (index) {
			_this.pageInfo.product_list[index].store_list.is_loading = true
			_this.$forceUpdate()
			let param = {
				ids: _this.pageInfo.product_list[index].product_ids,
				page: _this.pageInfo.product_list[index].store_list.page ? _this.pageInfo.product_list[index].store_list.page : 2,
				noTip: true
			}
			common.post('Special&a=getShopList', param, (data) => {
				_this.pageInfo.product_list[index].store_list.is_loading = false
				_this.pageInfo.product_list[index].store_list.store_list = _this.pageInfo.product_list[index].store_list.store_list.concat(data.store_list)
				if (data.has_more) {
					_this.pageInfo.product_list[index].store_list.page = param.page + 1
				} else {
					_this.pageInfo.product_list[index].store_list.has_more = false
				}
				console.log('店铺列表', data)
				_this.$forceUpdate()
				getRect()
			})
		}
	}
	
}

const getPageInfo = () => {
	common.post('Special&a=getDiypageDetail', {page_id: _this.specialId}, (data) => {
		console.log('外卖专题页数据', data)
		if (data) {
			_this.pageInfo = data
			if (_this.pageInfo.now_page.bgcolor != '#ffffff') {
				_this.tabTitleColor = _this.pageInfo.now_page.bgcolor
				document.title = _this.pageInfo.now_page.page_name
			}
			let lastItem =  data.field_list[data.field_list.length - 1]
			if ( lastItem.field_type == 'store_cate' && lastItem.content.store_cate_arr.length > 1) {
				if(lastItem.content.store_cate_arr.length > 5) {
					_this.shopNav = lastItem.content.store_cate_arr.slice(0,5)
				}
				getRect('hasStore')
			} else {
				getRect()
			}
		}
	})
}


const getRect = (hasStore) => {
	uni.showLoading({
		title: '',
		mask: true
	})
	setTimeout(function(){
		uni.createSelectorQuery().selectAll('.notice .every').boundingClientRect(function(rect){
			uni.hideLoading()
			console.log('公告的的长度信息', rect, _this.systemInfo)
			if (rect && rect.length > 0) {
				_this.boxWidth = _this.systemInfo.windowWidth - 40
				let animation = uni.createAnimation({
				  transformOrigin: "50% 50%",
				  duration: 1000,
				  timingFunction: "ease",
				  delay: 0
				})
				rect.map(item => {
					if (item.width > _this.boxWidth) {
						_this.noticeRect[item.dataset.index] = {
							width: item.width,
							hidden: item.width > _this.boxWidth,
							distance: 0,
							duration: Math.ceil(item.dataset.textlength / 2)
						}
					}
					return item
				})
				console.log('公告组件信息', _this.noticeRect)
				_this.$forceUpdate()
			}
		}).exec()
		
		if (hasStore) {
			uni.createSelectorQuery().selectAll('.tab-title-wrapper, .type-content').boundingClientRect(function(rect){
				console.log('分类标题的位置信息', rect, _this.scrollTop)
				if (rect && rect.length > 2) {
					_this.tabTitleTop = rect[0].top
					_this.typeItemTop = rect.slice(1, rect.length)
					if (_this.scrollTop > 0) {
						_this.tabTitleTop = rect[0].top + _this.scrollTop
						_this.typeItemTop.map(item => {
							item.top = item.top + _this.scrollTop
							return item
						})
					}
				}
			}).exec()
		}
	}, 500)
}
</script>

<style lang="stylus">
.special-content
	background #fff
	min-height 100%
	color #333
	padding-bottom 80px
	overflow-x hidden
	.padding-view
		padding 0 10px
	.margin-view
		margin 0 10px
	// padding 0 10px
	.title-box
		padding 10px 0
		// margin 0 10px
		border-bottom 1px solid #f2f2f2
		&.align-0
			text-align left
		&.align-1
			text-align center
		&.align-2
			text-align right
		.main
			font-size 18px
		.sub
			font-size 12px
			color #999
	.rich-text
		// margin 0 10px
	.text-nav
		padding 10px
		border-bottom 1px solid #f2f2f2
		display flex
		align-items center
		justify-content space-between
		font-size 14px
		font-weight bold
		background #fff
		.iconfont
			color #999
			font-size 18px
	.line
		margin 20px 0
		width 100%
		border-bottom 1px dashed #ccc
	.blank
		width 100%
	.notice
		height 30px
		padding 0 10px
		color #f90
		background #ffc
		display flex
		font-size 12px
		height 30px
		line-height 30px
		.marquee-title
			width 40px
		.marquee-box
			flex 1
			position relative
			.every
				white-space nowrap
	.image-nav
		display flex
		font-size 12px
		padding 10px 0
		// background #fff
		.item
			width 25%
			text-align center
			padding 5px 
			// box-sizing border-box
			.img
				width 100%
				height 0
				padding-bottom 100%
				background-size 100% auto
			.text
				margin-top 5px
	.image-nav-fixed
		position fixed
		left 0
		right 0
		bottom 0
		background-color #FFFFFF
		z-index  9999
	.image-ad
		.img-desc
			position absolute
			bottom 0
			left 0
			right 0
			background rgba(0, 0, 0, .6)
			color #fff
			font-size 14px
			padding 5px
			white-space nowrap
			overflow hidden
		&.swiper
			width 100%
			padding-top 50%
			position relative
			.img-box
				width 100%
				height 100%
				position absolute
				top 0
				left 0
				.img
					width 100%
					height 100%
		&.big
			.img-box
				margin 10px 10px 0 10px
				width calc(100%-20px)
				padding-top 50%
				position relative
				text-align center
				.img
					width 100%
					height 100%
					position absolute
					top 0
					left 0
		&.small
			display flex
			flex-wrap wrap
			.img-box
				margin-top 10px
				width calc(50% - 6px)
				// width 50%
				padding-top calc(50% - 6px)
				position relative
				overflow hidden
				&:nth-child(2n)
					// margin-right 4px
				.img
					margin-left 10px
					width 100%
					height 100%
					position absolute
					top 0
					left 0
				
	.coupon-list
		padding-top 10px
		display flex
		flex-wrap wrap
		overflow hidden
		.coupon-item
			width -webkit-calc(50% - 5px)
			width calc(50% - 5px)
			margin-bottom 10px
			background #fff
			border-radius 5px
			overflow hidden
			box-shadow 0 0 5px rgba(0, 0, 0, .2)
			&:nth-child(2n)
				margin-left 10px
			.name-box
				padding 10px
				font-size 0
				display flex
				align-items center
				background linear-gradient(to right, #F87652 , #E83D63);
				position relative
				overflow hidden
				&::after
					content ''
					position: absolute;
					z-index: 5;
					bottom: -5px;
					left: 0;
					transform-origin: center left;
					transform: rotate(0deg);
					width: 100%;
					height: 8px;
					background-image: radial-gradient(circle, #fff, #fff 3px, transparent 0px, transparent 2px, transparent 22px, transparent);
					background-size: 8px 8px;
					background-repeat: repeat-x;
				.img
					width 30px
					height 30px
					background #f4f4f4
					margin-right 5px
					border-radius 4px
					flex-shrink 0
				.name
					font-size 14px
					color #fff
					white-space nowrap
					overflow hidden
			.discount-box
				padding 20rpx 10px
				overflow hidden
				word-break break-all
				font-size 12px
				.num
					font-size 18px
				.red
					color #ED1955
				.gray
					color #999
				.discont
					display flex
					justify-content space-between
					align-items center
					margin-bottom 5px
				.btn-box
					flex-shrink 0
					.btn
						padding 10rpx 15px
						font-size 12px
						border-radius 15px
						color #fff
						&.receive
							background #ED1955
							padding 10rpx 10px
						&.use
							border 1px solid #ED1955
							color #ED1955
						&.end
							background #bbb
							
	.tab-title-wrapper
		height 40px
		margin 15px -10px 0
		.tab-title
			display flex
			align-items center
			font-size 14px
			background #fff
			padding 10px 0
			overflow hidden
			margin-bottom 10px
			&.fixed
				position fixed
				top 0
				left 0
				right 0
				z-index 99
				border-bottom 1px solid rgba(0,0,0,.1)
			.item
				flex 1
				text-align center
				white-space nowrap
				overflow hidden
	.shop-list
		padding-bottom 10px
		.type-content
			font-size 14px
			&:last-child
				.loading-txt
					margin-bottom 0
			.title
				color #bbb
				text-align center
				display flex
				justify-content center
				align-items center
				padding 20px 0 10px
				.txt
					padding 0 10px
				&::before, &::after
					content ''
					height 1px
					background #eee
					flex-grow 1
			.item
				margin 0 0 10px
				background #fff
				border-radius 5px
				padding: 15px 10px 10px 10px;
			.loading-txt
				background #fff
				text-align center
				margin 0 10px 10px
				border-radius 5px
				color #333
				.txt
					display inline-block
					width 100%
					padding 10px
					box-sizing border-box
					
					


// 公告动画
.animate {
    font-size: 12px;
    display: inline-block;
    animation: 5s wordsLoop linear infinite normal;
}

@keyframes wordsLoop {
    0% {
        transform: translateX(100vw);
        -webkit-transform: translateX(100vw);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}

@-webkit-keyframes wordsLoop {
    0% {
        transform: translateX(100vw);
        -webkit-transform: translateX(100vw);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}
</style>
